import Taro, { Component } from '@tarojs/taro'
import { View, Image, Text, Button } from '@tarojs/components'
import { AtIcon, AtInput } from 'taro-ui'
import { Header } from '../common/header';
import '../common/header.scss'
import './confirm.scss'
import '../../icon.scss'

export default class Confirm extends Component {

  constructor(){
    super();
    this.state = {
      address:null,
      city:null,
      created_at:"",
      district:null,
      freight:0,
      g_total_price:0,
      goods:[],
      id:null,
      a_id:null,
      mobile:null,
      name:null,
      o_id:null,
      order_num:"",
      pay_time:null,
      pay_total:0,
      province:null,
      service_charge:0,
      status:0,
      u_id:0,
      updated_at:null,
      remark:''
    }
  }

  componentWillMount () { }

  componentDidMount () { 
    let orderId = this.$router.params.id;
    let that = this;
    let user = Taro.getStorageSync('user');
    Taro.request({
      credentials:'include',
      url: 'https://guoxiaojian.guoxiaoge.cn/api/order/detail/' + orderId,
      data:{
        token : user.token
      },
      success:(res) => {
        if(res.statusCode === 200){
          if(res.data.status === 'SUCCESS'){
            that.setState({
              ...res.data.data
            });
          }else{
            if(res.data.status === 'FAILED'){
              if(res.data.failedCode === 'NO_LOGIN'){
                Taro.navigateTo({
                  url:'/pages/login/login'
                });
              }
            }
          }
        }
      }
    })
    console.log(orderId);
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  onClickLeftIcon(){
    Taro.navigateBack();
  }

  handleSelectAddress(){
    Taro.navigateTo({
      url: '/pages/address/index?o_id='+this.state.id+'&a_id='+this.state.a_id
    });
  }

  handleSubmit(){
    let that = this;
    let user = Taro.getStorageSync('user');
    Taro.request({
      credentials:'include',
      url: 'https://guoxiaojian.guoxiaoge.cn/api/order/prepay',
      method:'POST',
      data:{
        o_id:that.state.id,
        remark:  that.state.remark,
        token : user.token
      },
      success:(res) => {
        if(res.statusCode === 200){
          if(res.data.status === 'SUCCESS'){
            let config = JSON.parse(res.data.data);
            console.log(config);
            config.success = function(res){
              Taro.navigateTo({
                url:'/pages/order/index?index=0'
              });
            }
            config.fail = function(res){
              console.log(res);
            }
            Taro.requestPayment(config)
          }else{
            if(res.data.status === 'FAILED'){
              if(res.data.failedCode === 'NO_LOGIN'){
                Taro.navigateTo({
                  url:'/pages/login/login'
                });
              }
            }
          }
        }
      }
    })
  }

  render () {
    return (
      <View className='oder-detail-box'>
       <Header 
          leftIconType='chevron-left' 
          onClickLeftIcon={this.onClickLeftIcon} 
          title='确认订单'>
        </Header>
       
        {
            this.state.address
            ?
            <View className='address-content'>
              <View className='address-name'>
                <View className='address-name-text'>{this.state.name}</View>
                <View className='address-name-type'>默认</View>
              </View>
              <View className='address-content-info'>
                <View className='address-content-info-mobile'>
                  <Text>{this.state.mobile}</Text>
                  <View className='address-edit' onClick={this.handleSelectAddress}>
                    <AtIcon prefixClass='icon' value='xiugai' size='12' color='#868686'></AtIcon>
                    <Text>修改</Text>
                  </View>
                </View>
                <View className='address-content-info-content'>
                {this.state.province} {this.state.city} {this.state.district} {this.state.address} 
                </View>
              </View>
            </View>
            :
            <View className='address-content'>
              <View className='address-content-empty' onClick={this.handleSelectAddress}></View> 
            </View>
        }

      <View className='order-detail'>
        <View className='order-shop-name'>
          <AtIcon prefixClass='icon' value='dianpu' size='12' color='#868686'></AtIcon>
          <Text className='order-shop-name-text'>果小贱平台</Text>
        </View>

        {
          this.state.goods.map(function(item){
            return <View className='order-detail-goods'>
              <Image className='order-detail-goods-image' src={item.small_image} mode='widthFix' />
              <View className='order-detail-goods-info'>
                <View className='order-detail-goods-title'>{item.show_title}</View>
                <View className='order-detail-goods-unit'>规格: {item.unit}</View>
                <View className='order-detail-goods-price'>
                  <View className='order-detail-goods-price-text'>￥{item.now_price}</View>
                  <View>x{item.buy_num}</View>
                </View>
              </View>
            </View>
          })
        }
      </View>

      <View className='order-money-detail'>
        <View className='order-money-detail-item'>
          <View>商品总额:</View>
          <View className='order-money-detail-text'>￥{this.state.g_total_price}</View>
        </View>
        {/* <View className='order-money-detail-item'>
          <View>活动满减:</View>
          <View className='order-money-detail-text'>-￥0</View>
        </View>
        <View className='order-money-detail-item'>
          <View>优惠券:</View>
          <View>
            <Text className='order-money-detail-text'>-￥20</Text>
            <AtIcon value='chevron-right' size='20' color='#999999'></AtIcon>
          </View>
        </View> */}
        <View className='order-money-detail-item'>
          <View>运费:</View>
          <View className='order-money-detail-text'>￥{this.state.freight}</View>
        </View>
        <View className='order-money-detail-item'>
          <View>实付金额:</View>
          <View className='order-money-detail-text'>￥{this.state.pay_total}</View>
        </View>
      </View>
        <View className='order-remark'>
          <AtInput
            className='order-remark-input'
            name='remark'
            title='留言:'
            type='text'
            placeholder='给卖家留言'
            value={this.state.remark}
            onChange={this.handleChange.bind(this)}
          />
        </View>

        <View className='order-detail-bottom'>
          <View className='order-detail-realmoney'>
            <View>实付金额:</View>
            <View className='order-detail-realmoney-text'>￥{this.state.pay_total}</View>
          </View>
          <View className='order-detail-button'>
            <Button className='order-detail-button-item' onClick={this.handleSubmit}>提交订单</Button>
          </View>
        </View>

      </View>
    )
  }
}